
@use "sass:math";

@import "./common/variable";
@import "./common/func";
@import "./common/mixin";
@import "./common/extend";

@import "./reset";


#app{
    width: pxToRem(750px);
}

.header{
    background-color: $success;
    border-#{$side}: 1px solid #333;
}


.slideBar{
    width: 100px + 200px;
    width: 100px - 20px;
    width: 100px * 20;
    width: math.div(100px,2);
    width: math.div(100px,2px)*1rem;
}



.header{
    // @include typeArea();
    @extend %w;

    .navBar{
        float: left;

        & > li{
            padding: 0 20px;
            float: left;

            &:hover{
                background-color: $success;
            }

        }
    }

    .searchBar{
        float: right;
    }
}

.main{
    @include typeArea(1126px);
}
.footer{
    @extend %w;
}


@for $i from 1 to 11 {
    .list li:nth-child(#{$i}){
        background-position: -10px -40px*($i - 1);
    }
}

// $i:1;
// @while($i <= 10){
//     .list li:nth-child(#{$i}){
//         background-position: -10px -40px*($i - 1);
//     }
//     $i:$i+1;
// }

@each $item in (a,b,c,d){
    .#{$item}{
        background-image: url(../images/#{$item}.jpg);
    }
}
@each $index,$item in (1:a,2:b,3:c,4:d){
    .box:nth-child(#{$index}){
        background-image: url(../images/#{$item}.jpg);
    }
}